import React from "react";
import Footer from "../common/Footer";

const Index = () =>
{
    const [hotList,setHotList] = React.useState([]);
    const [cateList,setCateList] = React.useState([]);
    const listRef = React.useRef(null);
    const [finished,setFinished] = React.useState(false);
    const [page,setPage] = React.useState(1);
    const [limit,setLimit] = React.useState(10);
    const CateDta = React.useRef([]);

    // 下拉刷新
    const onRefresh = () =>
    {
        setFinished(false);
        setPage(1);
        setCateList([]);
        CateDta.current = [];

        return new Promise(resolve => {
            setTimeout(() => {
                React.Vant.Toast.info('刷新成功');
                getCateData();
                resolve(true);
            },1500);
        });
    }

    // 上拉加载
    const onLoadRefresh = () =>
    {
        setFinished(true);
        getCateData();
    }

    const Items = () =>
    {
        if(cateList.length > 0)
        {
            return cateList.map(item => {
                return (
                    <li key={item.id}>
                        <React.Router.NavLink to={'/category/category/info?id=' + item.id}>
                            <img src={item.image_cdn} alt="" />
                            <p>{item.name}</p>
                            <span>{item.createtime_text}</span>
                        </React.Router.NavLink>
                    </li>
                )
            })
        }else{
            return <React.Vant.Empty description="暂无文章" />
        }
    }

    const getCateData = async () => {
        let data = {
            page,
            limit
        }

        let result = await React.Api.CategoryIndex(data);

        if(result && result.code === 1)
        {
            let count = result.data.count;
            CateDta.current = CateDta.current.concat(result.data.list);
            setCateList(CateDta.current);

            if(CateDta.current.length >= count)
            {
                setFinished(true);
                return;
            }
            
            setPage(page + 1);
            setFinished(false);
        }
    }

    const getHotData = async () =>
    {
        let result = await React.Api.CategoryHot();

        if(result && result.code === 1)
        {
            setHotList(result.data);
        }
    }

    React.useEffect(() => {
        getHotData();
    },[]);

    const HotSwiper = () => {
        if(hotList.length > 0)
        {
            return (
                <React.Vant.Swiper>
                    {hotList.map(item => (
                        <React.Vant.Swiper.Item key={item.id}>
                            <React.Vant.Image lazyload src={item.image_cdn} />
                        </React.Vant.Swiper.Item>
                    ))}
                </React.Vant.Swiper>
            )
        }
    }

    return (
        <>
            <React.Vant.Sticky
                zIndex={10}
            >
                <React.Vant.NavBar
                    title="学术"
                    leftText={<React.Icons.AppsO fontSize={'1.5em'} />}
                    rightText={<React.Icons.Search fontSize={'1.5em'} />}
                />
            </React.Vant.Sticky>

            <div className="banner_shouy">
                <HotSwiper />
            </div>

            {/* 列表 */}
            <React.Vant.PullRefresh onRefresh={onRefresh} onRefreshEnd={() => listRef.current?.check()}>
                {/* List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果 */}
                <React.Vant.List finished={finished} ref={listRef} onLoad={onLoadRefresh}>
                    <div className="lest_xs">
                        <ul>
                            <Items />
                        </ul>
                    </div>
                </React.Vant.List>
            </React.Vant.PullRefresh>

            {/* 占位 */}
            <div style={{height:".75rem"}}></div>
            
            {/* 底部导航 */}
            <Footer />
        </>
    )
}

export default Index;